<template>
  <div id="app">
    <div v-if="$route.meta.showNan" class="box">
      <HomeHead class="head_1" />
      <nav>
        <li>
          <router-link to="/">推荐音乐</router-link>
          <router-link to="/hot">热歌榜</router-link>
          <router-link to="/search">搜索</router-link>
        </li>
      </nav>
    </div>

    <router-view
      @update:currentSong="currentSong = $event"
      :currentSong="currentSong"
      :playing="playing"
      :style="duration ? { marginBottom: '60px' } : ''"
      :currentTime="currentTime"
      :songermsg="songermsg"
      :idds="idd"
      @update:playlist="playlist = $event"
      @update:playlists="kkk($event)"
      @update:songermsg="songermsg = $event"
      @songlistdetail="songlistdetail($event)"
    />
    <audio
      ref="audio"
      :src="
        currentSong
          ? `https://music.163.com/song/media/outer/url?id=${currentSong.id}.mp3`
          : ''
      "
      controls
      autoplay
      @play="playing = true"
      @pause="playing = false"
      style="display: none"
      @timeupdate="currentTime = $event.target.currentTime"
      @durationchange="duration = $event.target.duration"
      @ended="nextSong"
    ></audio>
    <MusicPlay
      @audio-play-handler="
        $refs.audio.play();
        playing = true;
      "
      @audio-pause-handler="
        $refs.audio.pause();
        playing = false;
      "
      @update:crut="$refs.audio.currentTime = $event / 1000"
      :currentSong="currentSong"
      :playing="playing"
      :currentTime="currentTime"
      :duration="duration"
      :playlist="playlist"
      @update:currentSong="currentSong = $event"
      @next-song="nextSong"
      @prev-song="prevSong"
      @radomplay="radomplay=$event"
    ></MusicPlay>
  </div>
</template>
<script>
import HomeHead from "./components/HomeHead.vue";
import MusicPlay from "./components/MusicPlay.vue";

export default {
  components: {
    HomeHead,
    MusicPlay,
  },
  data: function () {
    return {
      currentSong: null,
      playing: false,
      currentTime: 0,
      duration: 0,
      playlist: [],
      songermsg: {},
      idd: null,
      radomplay:false,
    };
  },
  methods: {
    kkk: function (eve) {
      this.playlist = eve;
      this.currentSong = this.playlist[0];
    },
    nextSong: function () {
      var currentIndex = this.playlist.findIndex((o) => {
        return o.id == this.currentSong.id;
      });
      console.log(currentIndex);
      if(this.radomplay){
        this.currentSong =
        currentIndex == this.playlist.length - 1
          ? this.playlist[0]
          : this.playlist[parseInt(Math.random()*(this.playlist.length))];
      }else{
        this.currentSong =
        currentIndex == this.playlist.length - 1
          ? this.playlist[0]
          : this.playlist[currentIndex + 1];
      }
      
    },
    prevSong: function () {
      var currentIndex = this.playlist.findIndex((o) => {
        return o.id == this.currentSong.id;
      });
      console.log(currentIndex);
      if(this.radomplay){
        this.currentSong =
        currentIndex == this.playlist.length - 1
          ? this.playlist[0]
          : this.playlist[parseInt(Math.random()*(this.playlist.length))];
      }else{
        this.currentSong =
        currentIndex == 0
          ? this.playlist[this.playlist.length - 1]
          : this.playlist[currentIndex - 1];
      }
    },
    songlistdetail: function (eve) {
      this.idd = eve;
      this.$router.push({ path: "/songlistdetails" });
    },
  },
};
</script>

<style lang="less">
#app {
  background-color: #fff;
}
.box {
  height: 125px;
  .head_1 {
    position: fixed;
    top: 0;
  }
  nav {
    li {
      width: 100%;
      background-color: #fff;
      list-style: none;
      display: flex;
      height: 42px;
      align-items: center;
      justify-content: space-around;
      position: fixed;
      top: 84px;
      z-index: 10;
      box-shadow: 0 -2px 0 0 rgb(216, 216, 216) inset;
      a {
        color: #333333;
        text-decoration: none;
        font-size: 18px;
        position: relative;
        &.router-link-exact-active {
          color: #dd001b;
          &::after {
            content: "";
            display: inline-block;
            width: 100%;
            height: 3px;
            background-color: #dd001b;
            position: absolute;
            top: 27px;
            left: 0;
          }
        }
      }
    }
  }
}
</style>
